<template>

  <div class="refine_opcreatewarehouse">
    <h2 class="titleblue">{{title}}</h2>
    <div class="contant">
      <el-form ref="form" :model="form">
        <div class="grid-content">
          <label>单位名称</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.companyName"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>单位类型</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.companyType"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>应急联系人</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.emmerContact"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>联系电话</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.telephone"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>联系固话</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.fixContact"
                    placeholder=""></el-input>
        </div>

        <div class="grid-content">
          <label>设备库名称</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.libraryName"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>应急库类型</label>
          <el-select :disabled="detail=='look'?true:false" v-model="form.category" class="select-width-150"
                     placeholder=""><!--@change='changeType'-->
            <el-option
              v-for="item in emeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-input :disabled="detail=='look'?true:false" class="select-width-150 margin-left-160"
                    v-model="form.typeName" placeholder=""></el-input>
        </div>
        <!--<div class="grid-content">-->
          <!--<label>{{types.type}}</label>-->
          <!--<el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.number"-->
                    <!--placeholder=""></el-input>-->
        <!--</div>-->
        <div class="grid-content">
          <label>生产厂家</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.manufacturer"
                    placeholder=""></el-input>
        </div>
        <!--<div class="grid-content line-height-25">-->
          <!--<label>{{types.typeName}}</label>-->
          <!--<el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.sinRate"-->
                    <!--placeholder=""></el-input>-->
        <!--</div>-->
        <div class="grid-content">
          <label>停靠点(纬度)</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-60" v-model="lat.latitude1"></el-input>
          <sup>°</sup>
          <el-input :disabled="detail=='look'?true:false" class="select-width-60" v-model="lat.latitude2"></el-input>
          <sup>'</sup>
          <el-input :disabled="detail=='look'?true:false" class="select-width-60" v-model="lat.latitude3"></el-input>
          <sup>"</sup>
          <el-select :disabled="detail=='look'?true:false" v-model="lat.latitude4" placeholder=""
                     class="select-width-60">
            <el-option label="N" value="N"></el-option>
            <el-option label="S" value="S"></el-option>
          </el-select>
        </div>
        <div class="grid-content">
          <label>(经度)</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-60" v-model="lon.longitude1"></el-input>
          <sup>°</sup>
          <el-input :disabled="detail=='look'?true:false" class="select-width-60" v-model="lon.longitude2"></el-input>
          <sup>'</sup>
          <el-input :disabled="detail=='look'?true:false" class="select-width-60" v-model="lon.longitude3"></el-input>
          <sup>"</sup>
          <el-select :disabled="detail=='look'?true:false" v-model="lon.longitude4" placeholder=""
                     class="select-width-60">
            <el-option label="E" value="E"></el-option>
            <el-option label="W" value="W"></el-option>
          </el-select>
        </div>
        <div class="grid-content">
          <label>存放地点</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.storageLocation"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>购置年份</label>
          <el-date-picker
            v-model="form.purchaseYear"
            type="year"
            placeholder="选择购置年份"
            class="select-width-220"
            value-format='yyyy'
            :disabled="detail=='look'?true:false">
          </el-date-picker>

        </div>
        <div class="grid-content">
          <label>存放地所属辖区</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.storageArea"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content">
          <label>所属单位</label>
          <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.department"
                    placeholder=""></el-input>
        </div>
        <div class="grid-content" v-if='form.category==186'>
          <label>是否防爆</label>
          <el-radio v-model="form.antiExplosion" style='width:50px' :label="1">是</el-radio>
          <el-radio v-model="form.antiExplosion" style='width:50px' :label="0">否</el-radio>
        </div>
      </el-form>
      <div class="footerbtn" v-show="footerbtn">
        <el-button class="sure" @click="sure">确定</el-button>
        <el-button class="cancel" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>

</template>

<script>
  import emWarehouseService from '@/services/EmWarehouseService.js'
  import coordinateTransform from '@/utils/coordinateTransform.js'

  export default {
    name: 'CreateWarehouse',
    props: ['id', 'detail', 'shipOptions', 'navOptions', 'emeOptions'],
    watch: {
      detail: function (value) {
        if (value == 'create') {
          this.footerbtn = true
          this.title = '新建应急库'

        } else if (value == 'edit') {
          this.footerbtn = true
          this.title = '编辑溢油应急库'

        } else if (value == 'look') {
          this.footerbtn = false
          this.title = '溢油应急库详情'

        }
      }
    },
    data: function () {
      return {
        form: {
          amount: '', // 数量 ,
          antiExplosion: 1, // 是否防爆 ,
          belongUnit: '', // 所属单位 ,
          category: '', // 类型（字典表） ,
          companyName: '', // 单位名称 ,
          companyType: '', // 单位类型 ,
          department: '', // 所属单位 ,
          emmerContact: '', // 应急联系人 ,
          fixContact: '', // 联系固话 ,
          latitude: '', // 纬度 ,
          libraryName: '', // 设备库名称 ,
          longitude: '', // 经度 ,
          manufacturer: '', // 生产厂家 ,
          outId: '', // 外部通讯录主键ID ,
          purchaseYear: '', // 购置年份 ,
          singleRecycleRate: '', // 单台回收速率 ,
          storageArea: '', // 存放地所属辖区 ,
          storageLocation: '', // 存放地点 ,
          telephone: '', // 联系电话 ,
          typeName: '', // 类型（输入字典表） ,
        },
        types: {},
        typeList: [{
          typeId: '',
          typeDesc: '',
          number: '',
          name: '',
        }],
        lat: {
          latitude1: '',
          latitude2: '',
          latitude3: '',
          latitude4: 'N',
        },
        lon: {
          longitude1: '',
          longitude2: '',
          longitude3: '',
          longitude4: 'E',
        },
        footerbtn: true,
        title: '新增应急库',
        detailId: null,
        createTime: null
      }
    },
    created () {
      var value = this.detail
      if (value == 'create') {
        this.footerbtn = true
        this.title = '新建应急库'
      } else if (value == 'edit') {
        this.footerbtn = true
        this.title = '编辑溢油应急库'
        this.showDetail()
      } else if (value == 'look') {
        this.footerbtn = false
        this.title = '溢油应急库详情'
        this.showDetail()
      }
    },
    methods: {
      showDetail () {
        var data = this.$route.params.data
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'category' && data[key]) {
            this.emeOptions.forEach(item => {
              if (data[key] == item.name) {
                this.form[key] = item.id
              }
            })
          } else if (key == 'latitude' && data[key]) {
            let latitude = coordinateTransform.change(data[key], 'toTime')
            this.lat.latitude1 = latitude.split('°')[0]
            this.lat.latitude2 = latitude.split('°')[1].split('\'')[0]
            this.lat.latitude3 = latitude.split('°')[1].split('\'')[1].split('"')[0]
          } else if (key == 'longitude' && data[key]) {
            let longitude = coordinateTransform.change(data[key], 'toTime')
            this.lon.longitude1 = longitude.split('°')[0]
            this.lon.longitude2 = longitude.split('°')[1].split('\'')[0]
            this.lon.longitude3 = longitude.split('°')[1].split('\'')[1].split('"')[0]
          } else if (key == 'antiExplosion') {
            if (data[key] == true) {
              this.form[key] = 1
            }else if (data[key] == false) {
              this.form[key] = 0
            }
          } else {
            this.form[key] = data[key]
          }
        }
      },
      changeType (val) {
        for (var i of this.emeOption) {
          if (i.value == val) {
            this.getType(i.label)
          }
        }
      },
      getType (name) {
        this.$axios.get('OsWarehouseSelectWareHouseById', {
          params: {
            skey: localStorage.getItem('auth'),
            name: name || '收油机'
          }
        }).then(res => {
          this.types = res.data.content.types
        })
      },
      addDay () {
        this.typeList.push({
          typeId: '',
          typeDesc: '',
          number: '',
        })
      },
      sure () {
        let latitude = ''
        let longitude = ''
        if (this.lat.latitude1 && this.lat.latitude2 && this.lat.latitude3) {
          latitude = coordinateTransform.change(this.lat.latitude1 + '°' + this.lat.latitude2 + '\'' + this.lat.latitude3, 'toDeg')
        }
        if (this.lon.longitude1 && this.lon.longitude2 && this.lon.longitude3) {
          longitude = coordinateTransform.change(this.lon.longitude1 + '°' + this.lon.longitude2 + '\'' + this.lon.longitude3, 'toDeg')
        }
        let obj = {
          amount: this.form.amount,
          antiExplosion: this.form.antiExplosion,
          belongUnit: this.form.belongUnit,
          category: this.form.category,
          companyName: this.form.companyName,
          companyType: this.form.companyType,
          department: this.form.department,
          emmerContact: this.form.emmerContact,
          fixContact: this.form.fixContact,
          latitude,
          libraryName: this.form.libraryName,
          longitude,
          manufacturer: this.form.manufacturer,
          outId: this.form.outId,
          purchaseYear: this.form.purchaseYear,
          singleRecycleRate: this.form.singleRecycleRate,
          storageArea: this.form.storageArea,
          typeName: this.form.typeName,
          storageLocation: this.form.storageLocation,
          telephone: this.form.telephone
        }
        // this.form.purYear = this.form.purYear + '年'
        // this.form.latitude = this.lat.latitude1 + '°' + this.lat.latitude2 + '\'' + this.lat.latitude3 + '"' + this.lat.latitude4
        // this.form.longitude = this.lon.longitude1 + '°' + this.lon.longitude2 + '\'' + this.lon.longitude3 + '"' + this.lon.longitude4
        if (this.title == '编辑溢油应急库') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          emWarehouseService.update(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$emit('close')
            }
          })
        } else {
          emWarehouseService.create(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$emit('close')
            }
          })
        }
      },
      cancel () {
        this.$emit('close')
      },
      getData (id) {

        this.$axios.get(this.$config['selectWareHouseById'], {
          params: {
            skey: localStorage.getItem('auth'),
            d_id: this.id
          }
        }).then((res) => {
          if (res.data.content) {
            this.form = res.data.content.wares
            this.form.purYear = res.data.content.wares.purYear.slice(0, 4)
            this.types = res.data.content.types
            if (res.data.content.wares.latitude) {
              var lat1 = this.form.latitude.indexOf('°')
              var lat2 = this.form.latitude.indexOf('\'')
              var lat3 = this.form.latitude.indexOf('"')
              var lat4 = this.form.latitude.slice(this.form.latitude.length - 1, this.form.latitude.length)
            }

            if (res.data.content.wares.longitude) {
              var lon1 = this.form.longitude.indexOf('°')
              var lon2 = this.form.longitude.indexOf('\'')
              var lon3 = this.form.longitude.indexOf('"')
              var lon4 = this.form.longitude.slice(this.form.longitude.length - 1, this.form.longitude.length)
            }

            if (lon1) {
              this.lon.longitude1 = this.form.longitude.slice(0, lon1)
            }
            if (lon2) {
              this.lon.longitude2 = this.form.longitude.slice(lon1 + 1, lon2)
            }
            if (lon3) {
              this.lon.longitude3 = this.form.longitude.slice(lon2 + 1, lon3)
            }
            if (lon4) {
              this.lon.longitude4 = lon4
            }
            if (lat1) {
              this.lat.latitude1 = this.form.latitude.slice(0, lat1)
            }
            if (lat2) {
              this.lat.latitude2 = this.form.latitude.slice(lat1 + 1, lat2)
            }
            if (lat3) {
              this.lat.latitude3 = this.form.latitude.slice(lat2 + 1, lat3)
            }
            if (lat4) {
              this.lat.latitude4 = lat4
            }

          }
        })

      }

    }
  }

</script>

<style scoped lang="scss">

  .refine_opcreatewarehouse {
    width: 100%;
    display: inline-block;
    padding-bottom: 50px;

    .line-height-25 label {
      line-height: 20px !important;
      text-align: right !important;
    }

    .margin-left-160 {
      margin-left: 10px;
    }

    .select-width-60 {
      input {
        text-align: center;
        padding: 0;
      }
    }

    .el-select.select-width-60 {
      input {
        text-align: left;
        padding: 0px 15px;
      }
    }

    .sup {
      vertical-align: text-top;
    }

    .grid-div {
      border: 1px solid #ccc;
      padding: 10px 0px;
      box-sizing: border-box;
      width: 100%;
      display: inline-block;
      margin-bottom: 20px;

      .grid-content {
        margin-bottom: 0px;
      }

      .addday {
        margin-left: 80px;
      }

      .gridlist {
        margin-bottom: 10px;
        width: 100%;
        display: inline-block;
      }
    }

    .grid-content {
      width: 50%;
      float: left;
      margin-bottom: 20px;

      label {
        width: 150px;
        float: left;
        line-height: 40px;
        text-align: right;
        margin-right: 10px;

        i {
          color: #f56c6c;
          margin-right: 4px;
          font-style: normal;
        }
      }

      .el-radio-group {
        width: 220px;
        float: left;
        display: block;

        label {
          width: 30%;
          float: left;
        }
      }
    }

    .footerbtn {
      margin-top: 50px;
    }
  }

</style>
